<template>
  <div>
    <div class="tableTreeList">
     <el-table
        :data="tableData"
        :row-key="rowKey"
        @select='select'
        @select-all='selectAll'
        :tree-props="{children: 'children', hasChildren: 'isLeaf'}"
      >
      <!-- 表单头栏 -->
      <el-table-column v-if="isSelection" type="selection" align="center" :reserve-selection="reserveSelection" ></el-table-column>
      <template>
        <!-- 表单数据栏 -->
        <el-table-column v-for="(item,index) in tableCols" :key="index" :label="item.label" :min-width="item.minWidth" :prop="item.prop"  :sortable="item.sortable">
          <template slot-scope="scope">
            <!-- render -->
            <template v-if="item.render">
              <expand-dom :column="item" :row="scope.row" :render="item.render" :index="index" :rowIndex="scope.$index" :ref="item.ref"></expand-dom>
            </template>
            <template v-else>
              <span>{{scope.row[item.prop]}}</span>
            </template>
          </template>
        </el-table-column>
      </template>
      <!-- 表单操作栏 -->
      <template v-if="isOperates">
        <el-table-column ref="fixedColumn" label="操作" align="center" :min-width="operates.minWidth" :width="operates.width" :fixed="operates.fixed">
          <template slot-scope="scope">
            <template v-if="operates.tipType == 'popconfirm'">
                <el-popconfirm :title="operates.config.tipTitle" :confirm-button-text="operates.config.trueBtn"
                  :cancel-button-text="operates.config.falseBtn" @confirm="operates.config.method(scope.row)">
                  <div class="tablePopconfirm" slot="reference"><span>{{operates.config.text}}</span></div>
                </el-popconfirm>
            </template>
            <template v-else>
              <template v-for="(btn, key) in operates.list">
                <el-button :type="btn.type" :size="btn.size" :icon="btn.icon" :disabled="btn.disabled" v-if="btn.show && (!scope.row.hiddeMenus || scope.row.hiddeMenus && scope.row.hiddeMenus.filter(item=>item.id == btn.id).length == 0)" :key='btn.id'
                  :plain="btn.plain" @click.native.stop.prevent="btn.method(key,scope.row, scope.$index)">{{ btn.label }}
                </el-button>
                <el-divider direction="vertical" v-if="key < operates.list.length - 1 && (!scope.row.hiddeMenus || scope.row.hiddeMenus && scope.row.hiddeMenus.filter(item=>item.id == btn.id).length == 0)" :key="key"></el-divider>
              </template>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name:'tableTreeList',
  props:{
    tableData:{type:Array,default:()=>[]},
    rowKey:{type:String,default:()=>'id'},
    tableCols:{type:Array,default:()=>[]},
    enableEdit:{type:Boolean, default:false}, //是否可编辑
    isSelection:{type:Boolean, default:false},// 是否显示表格复选框
    reserveSelection:{type:Boolean, default:false},//是否记录分页选中
    isOperates:{type:Boolean, default:false},//是否记录分页选中
    operates: {}, // 操作按钮
  },
  components: {
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        rowIndex: Number,
				index: Number,
        column: {
          type: Object,
          default: null
        }
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index,
					rowIndex: ctx.props.rowIndex,
					ref:ctx.props.column.ref
        }
        if (ctx.props.column) {
          params.column = ctx.props.column
        }
        return ctx.props.render(h, params)
      }
    }
  },
  methods:{
    // 表格勾选
    select(rows,row){ // 有第二个参数 row
      this.$emit('handleSelect', rows,row)
    },
    // 全选
    selectAll(rows){
      this.$emit('handleSelect',rows)
    },
  }
}
</script>

<style lang="less">

</style>